<template>
  <n-config-provider :theme="theme">
    <n-message-provider>
      <n-layout has-sider>
      <!-- 侧边栏 -->
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
                 <!-- Logo -->
         <div class="logo">
           <h2 v-if="!collapsed">LogVision</h2>
           <h2 v-else>LV</h2>
         </div>

        <!-- 菜单 -->
        <n-menu
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          :value="activeKey"
          :default-expanded-keys="hasWorkspaces ? ['workspace'] : []"
          :expanded-keys="hasWorkspaces ? ['workspace'] : []"
          @update:value="handleMenuUpdate"
                          @click="(e: any) => {}"
          :indent="18"
          :root-indent="24"
        />
      </n-layout-sider>

      <!-- 主内容区 -->
      <n-layout>
        <!-- 顶部导航 -->
        <n-layout-header bordered>
          <div class="header">
            <div class="header-left">
              <n-button quaternary @click="collapsed = !collapsed">
                <template #icon>
                  <n-icon><MenuOutline /></n-icon>
                </template>
              </n-button>
              <n-breadcrumb>
                <n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
                  {{ item }}
                </n-breadcrumb-item>
              </n-breadcrumb>
            </div>
            <div class="header-right">
              <!-- 工作区选择器 -->
              <div v-if="hasWorkspaces" class="workspace-selector">
                <n-dropdown
                  :options="workspaceDropdownOptions"
                  @select="handleWorkspaceDropdownSelect"
                  trigger="click"
                >
                  <n-button quaternary class="workspace-dropdown-btn">
                    <template #icon>
                      <n-icon><CogOutline /></n-icon>
                    </template>
                    <span class="workspace-label">{{ workspaceDropdownLabel }}</span>
                    <template #suffix>
                      <n-icon class="dropdown-arrow" size="16">▼</n-icon>
                    </template>
                  </n-button>
                </n-dropdown>
              </div>
              <n-button quaternary disabled>
                <template #icon>
                  <n-icon><SettingsOutline /></n-icon>
                </template>
                设置
              </n-button>
            </div>
          </div>
        </n-layout-header>

                <!-- 内容区域 -->
        <n-layout-content content-style="padding: 16px;">
          <router-view />
          
          
          
          <!-- 右侧快捷操作栏 -->
          <div 
            class="quick-actions-right"
            @dragover="handleLogBasketDragOver"
            @drop="handleLogBasketDrop"
            @dragenter="handleLogBasketDragEnter"
            @dragleave="handleLogBasketDragLeave"
            @dragstart="handleDragStart"
            @dragend="handleDragEnd"
            data-tauri-drag-region
          >
            <!-- 拖拽区域指示器 -->
            <div 
              class="drag-zone-indicator"
              :class="{ 'active': isDragOver }"
            >
              <div class="drag-hint-text" v-if="isDragOver">
                放置日志
              </div>
            </div>
            
            <!-- 扩展拖拽区域覆盖 -->
            <div class="drag-area-cover"></div>
            
            <n-tooltip placement="left" trigger="hover">
              <template #trigger>
                <n-button 
                  class="quick-action-btn log-basket-btn" 
                  quaternary 
                  @click="handleLogBasketClick"
                  @contextmenu="handleLogBasketRightClick"
                  :class="{ 'drag-over': isDragOver, 'clear-animation': showClearAnimation, 'add-animation': showAddAnimation }"
                >
                  <template #icon>
                    <img 
                      src="/src/assets/logbasket.png" 
                      width="46" 
                      height="46" 
                      alt="日志篮"
                      style="object-fit: contain; display: block; border-radius: 8px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));"
                    />
                  </template>
                  
                  <!-- 日志数量徽章 -->
                  <div 
                    v-if="logBasketStats.totalLogs > 0" 
                    class="log-count-badge"
                  >
                    {{ logBasketStats.totalLogs > 99 ? '99+' : logBasketStats.totalLogs }}
                  </div>
                </n-button>
              </template>
              <span>日志篮 - 拖拽日志到此处</span>
            </n-tooltip>
            
            <!-- 右键菜单 -->
            <n-dropdown
              v-model:show="showRightClickMenu"
              :options="rightClickMenuOptions"
              placement="left-start"
              trigger="manual"
              :x="rightClickMenuX"
              :y="rightClickMenuY"
              @select="handleRightClickMenuSelect"
            />
            
            <!-- 清空成功提示 -->
            <n-notification
              v-model:show="showClearSuccess"
              type="success"
              title="清空成功"
              description="日志篮已清空"
              :duration="2000"
              placement="top-right"
            />
            
            <!-- 添加成功提示 -->
            <n-notification
              v-model:show="showAddSuccess"
              type="success"
              title="添加成功"
              :description="addSuccessMessage"
              :duration="2000"
              placement="top-right"
            />
          </div>
          
          <!-- 日志篮抽屉 -->
          <n-drawer
            v-model:show="showLogBasketDrawer"
            :width="drawerWidth"
            placement="right"
            :trap-focus="false"
            :block-scroll="false"
          >
            <n-drawer-header>
              <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <n-space align="center">
                  <img 
                    src="/src/assets/logbasket.png" 
                    width="24" 
                    height="24" 
                    alt="日志篮"
                    style="object-fit: contain;"
                  />
                  <span>日志篮</span>
                </n-space>
                <!-- 清空按钮移动到右上角，向左移动一点 -->
                <div style="margin-right: 24px;">
                  <n-button 
                    @click="clearLogBasket" 
                    type="error" 
                    quaternary
                    circle
                    size="small"
                    @mouseenter="handleClearAllButtonHover"
                    @mouseleave="handleClearAllButtonLeave"
                    class="clear-all-button"
                  >
                    <template #icon>
                      <n-icon><TrashOutline /></n-icon>
                    </template>
                  </n-button>
                </div>
              </div>
            </n-drawer-header>
            
            <n-drawer-content>
              <n-space vertical size="large">
                <!-- 日志列表 -->
                <n-card title="日志列表" size="small">
                  <n-empty v-if="logBasketItems.length === 0" description="暂无日志" />
                  <n-list v-else>
                    <n-list-item 
                      v-for="item in logBasketItems" 
                      :key="item.id"
                      :class="{ 'clear-animation': showClearAnimation }"
                    >
                      <n-thing>
                        <template #header>
                          <n-space align="center" justify="space-between">
                            <n-space align="center">
                              <!-- 日志类型标签 - 显示在日志级别左边 -->
                              <n-tag 
                                v-if="item.logType" 
                                :type="getLogTypeTagType(item.logType)" 
                                size="small" 
                                class="log-type-tag"
                              >
                                {{ getLogTypeDisplayName(item.logType) }}
                              </n-tag>
                              <!-- Interface标签 -->
                              <span v-if="item.logType === 'operation'" :class="getInterfaceClass(item.level)" class="interface-tag">
                                {{ item.level }}
                              </span>
                              <n-tag v-else :type="getLogLevelType(item.level)" size="small" class="log-level-tag">
                                {{ item.level }}
                              </n-tag>
                              <span>{{ item.timestamp }}</span>
                            </n-space>
                            <n-button size="tiny" quaternary @click="removeLogBasketItem(item.id)" class="delete-log-btn">
                              <template #icon>
                                <n-icon color="#d03050"><TrashOutline /></n-icon>
                              </template>
                            </n-button>
                          </n-space>
                        </template>
                        <template #description>
                          <n-space vertical size="small">
                            <div>
                               <span v-if="item.userInfo" style="margin-right: 8px;">
                                 <strong>用户:</strong> {{ item.userInfo }}
                               </span>
                               <span v-if="item.component" style="margin-right: 8px;">
                                 <strong>组件:</strong> {{ item.component }}
                               </span>
                               <span v-if="item.logIndex !== undefined" style="margin-left: 8px;">
                                 <strong>序号:</strong> {{ item.logIndex }}
                               </span>
                             </div>
                             <div>
                               <strong>消息:</strong> {{ item.message }}
                             </div>
                             <div style="font-size: 12px; color: #999;">
                               添加时间: {{ formatDate(item.addedAt) }}
                             </div>
                           </n-space>
                         </template>
                      </n-thing>
                    </n-list-item>
                  </n-list>
                </n-card>
              </n-space>
            </n-drawer-content>
          </n-drawer>
          
          <!-- 拖拽结果提示 -->
          <n-notification
            v-model:show="showDragResult"
            :title="dragResultMessage"
            type="info"
            placement="top-right"
            :duration="3000"
            :max="1"
          />
        </n-layout-content>
      </n-layout>
    </n-layout>

    <!-- 创建工作区对话框 -->
    <n-modal v-model:show="showCreateWorkspace" preset="card" title="创建新工作区" style="width: 600px">
      <n-form :model="newWorkspace" :rules="workspaceRules" ref="createFormRef">
        <n-form-item label="工作区名称" path="name">
          <n-input v-model:value="newWorkspace.name" placeholder="请输入工作区名称，建议以服务器IP命名" />
        </n-form-item>
        <n-form-item label="导入日志文件" path="logFiles">
          <n-upload
            v-model:file-list="modalFileList"
            :multiple="false"
            :accept="'.gz'"
            :max="1"
            @change="handleModalFileChange"
            @remove="handleModalFileRemove"
          >
            <n-upload-dragger>
              <div class="upload-content">
                <n-icon size="32" color="#d9d9d9">
                  <DocumentOutline />
                </n-icon>
                <p class="upload-text">点击或拖拽gz压缩包文件到此处，将自动解压</p>
              </div>
            </n-upload-dragger>
          </n-upload>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="showCreateWorkspace = false">取消</n-button>
          <n-button 
            type="primary" 
            @click="createWorkspaceFromModal"
            :disabled="!canCreateWorkspace"
          >
            创建
          </n-button>
        </n-space>
      </template>
    </n-modal>

    <!-- 设置对话框 -->
    <n-modal v-model:show="showSettings" preset="card" title="设置" style="width: 600px">
      <n-tabs type="line" animated>
        <n-tab-pane name="general" tab="常规">
          <n-space vertical>
            <n-form-item label="主题">
              <n-select v-model:value="themeName" :options="themeOptions" />
            </n-form-item>
            <n-form-item label="语言">
              <n-select v-model:value="language" :options="languageOptions" />
            </n-form-item>
          </n-space>
        </n-tab-pane>
        <n-tab-pane name="ai" tab="AI设置">
          <n-space vertical>
            <n-form-item label="AI服务">
              <n-select v-model:value="aiService" :options="aiServiceOptions" />
            </n-form-item>
            <n-form-item label="API密钥">
              <n-input v-model:value="apiKey" type="password" placeholder="请输入API密钥" />
            </n-form-item>
          </n-space>
        </n-tab-pane>
      </n-tabs>
    </n-modal>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref, computed, h, watch, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { darkTheme, lightTheme, NIcon, NMessageProvider } from 'naive-ui'
import type { UploadFileInfo, FormInst, FormRules } from 'naive-ui'
import { 
  MenuOutline, 
  SettingsOutline,
  DocumentTextOutline,
  AnalyticsOutline,
  BulbOutline,
  BarChartOutline,
  DocumentOutline,
  CogOutline,
  AddOutline,
  TrashOutline,
  ChevronDownOutline,
  BugOutline
} from '@vicons/ionicons5'
import { useWorkspaceStore } from './stores/workspace'
import { useLogBasketStore } from './stores/logBasket'
import { useFileDataStore } from './stores/fileData'

// 响应式数据
const router = useRouter()
const workspaceStore = useWorkspaceStore()
const logBasketStore = useLogBasketStore()
const fileDataStore = useFileDataStore()
const collapsed = ref(false)
const activeKey = ref('home')
const showSettings = ref(false)
const showCreateWorkspace = ref(false)
const themeName = ref('light')
const language = ref('zh-CN')
const aiService = ref('openai')
const apiKey = ref('')

// 右键菜单相关数据
const showRightClickMenu = ref(false)
const rightClickMenuX = ref(0)
const rightClickMenuY = ref(0)

// 拖拽相关数据
const isDragOver = ref(false)
const dragResultMessage = ref('')
const showDragResult = ref(false)

// 清空成功提示
const showClearSuccess = ref(false)

// 清空动画状态
const showClearAnimation = ref(false)

// 添加成功提示
const showAddSuccess = ref(false)
const addSuccessMessage = ref('')

// 添加成功动画状态
const showAddAnimation = ref(false)

// 添加全局点击事件监听器来隐藏右键菜单
import { onMounted, onUnmounted } from 'vue'

onMounted(async () => {
  document.addEventListener('click', handleGlobalClick)
  
  // 初始化 stores
  try {
    // workspaceStore 已经在创建时自动初始化了
    
    // 初始化 fileDataStore（异步）
    await fileDataStore.initializeFromStorage()
    
    // logBasketStore 已自动初始化
    
  } catch (error) {
    console.error('stores 初始化失败:', error)
  }
  
  // 添加窗口大小变化监听器
  const handleResize = () => {
    currentWindowWidth.value = window.innerWidth
  }
  
  window.addEventListener('resize', handleResize)
  
  // 在组件卸载时移除监听器
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
})

onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
})

function handleGlobalClick(event: MouseEvent) {
  // 如果右键菜单是显示的，且点击的不是右键菜单内的元素，则隐藏菜单
  if (showRightClickMenu.value) {
    const target = event.target as HTMLElement
    const isClickInsideMenu = target.closest('.n-dropdown') || target.closest('.n-dropdown-menu')
    
    if (!isClickInsideMenu) {
      showRightClickMenu.value = false
    }
  }
}

// 日志篮抽屉相关数据
const showLogBasketDrawer = ref(false)
const currentWindowWidth = ref(window.innerWidth)
const drawerWidth = computed(() => {
  // 抽屉宽度为当前窗口的一半
  const halfWidth = currentWindowWidth.value * 0.5
  return Math.max(600, halfWidth)
})

// 创建工作区相关数据
const createFormRef = ref<FormInst | null>(null)
const modalFileList = ref<UploadFileInfo[]>([])

const newWorkspace = reactive({
  name: '',
  type: 'general'
})

const workspaceRules: FormRules = {
  name: {
    required: true,
    message: '请输入工作区名称',
    trigger: 'blur',
    validator: (rule: any, value: string) => {
      if (!value) {
        return new Error('请输入工作区名称')
      }
      if (!/^[a-zA-Z0-9]/.test(value)) {
        return new Error('工作区名称必须以字母或数字开头')
      }
      if (!/^[a-zA-Z0-9._]+$/.test(value)) {
        return new Error('工作区名称只能包含字母、数字、点(.)、下划线(_)')
      }
      return true
    }
  },
  logFiles: {
    required: true,
    message: '请导入日志文件',
    trigger: 'change'
  }
}

// 组件初始化

// 主题配置
const theme = computed(() => themeName.value === 'dark' ? darkTheme : lightTheme)

// 计算是否有工作区
const hasWorkspaces = computed(() => workspaceStore.workspaces.length > 0)

// 动态菜单配置
const menuOptions = computed(() => {
  
  const baseOptions: any[] = [
    {
      label: '首页',
      key: 'home',
      icon: renderIcon(DocumentTextOutline),
      disabled: true
    },
    {
      label: '用例库管理',
      key: 'cases',
      icon: renderIcon(AnalyticsOutline),
      disabled: true
    }
  ]

    // 根据是否有工作区决定工作区管理菜单的结构
  if (hasWorkspaces.value) {
    // 有工作区时，显示带子菜单的工作区管理
    baseOptions.push({
      label: '工作区管理',
      key: 'workspace',
      icon: renderIcon(CogOutline),
      children: [
        {
          label: '本地日志查看',
          key: 'workspace-viewer',
          icon: renderIcon(DocumentTextOutline)
        },
        {
          label: '日志转储管理',
          key: 'workspace-dump',
          icon: renderIcon(DocumentTextOutline)
        },
        {
          label: 'RPC调用分析',
          key: 'workspace-rpc-analysis',
          icon: renderIcon(AnalyticsOutline),
          disabled: true
        },
        {
          label: '在线日志分析',
          key: 'workspace-online-analysis',
          icon: renderIcon(AnalyticsOutline),
          disabled: true
        },
        {
          label: '可视化',
          key: 'workspace-visualization',
          icon: renderIcon(BarChartOutline),
          disabled: true
        },
        {
          label: '智能分析',
          key: 'workspace-analysis',
          icon: renderIcon(BulbOutline),
          disabled: true
        },
        {
          label: '报表',
          key: 'workspace-reports',
          icon: renderIcon(DocumentTextOutline),
          disabled: true
        }
      ]
    })
  } else {
    // 没有工作区时，显示简单的工作区管理菜单
    baseOptions.push({
      label: '工作区管理',
      key: 'workspace',
      icon: renderIcon(CogOutline)
    })
  }

  return baseOptions
})

  // 监听路由变化，同步菜单状态
  watch(() => router.currentRoute.value.path, (newPath) => {
    const routeMap: Record<string, string> = {
      '/': 'home',
      '/cases': 'cases',
      '/workspace': 'workspace',
      '/workspace/viewer': 'workspace-viewer',
      '/workspace/dump': 'workspace-dump',
      '/workspace/rpc-analysis': 'workspace-rpc-analysis',
      '/workspace/analysis': 'workspace-analysis',
      '/workspace/visualization': 'workspace-visualization',
      '/workspace/reports': 'workspace-reports'
    }
    
    const key = routeMap[newPath]
    if (key) {
      activeKey.value = key
      // 如果是工作区相关页面，确保工作区菜单展开
      if (key.startsWith('workspace') && hasWorkspaces.value) {
        // 这里不需要手动设置，因为菜单组件会自动处理展开状态
      }
    }
  }, { immediate: true })

// 选项配置
const themeOptions = [
  { label: '浅色', value: 'light' },
  { label: '深色', value: 'dark' }
]

const languageOptions = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' }
]

const aiServiceOptions = [
  { label: 'OpenAI', value: 'openai' },
  { label: '本地模型', value: 'local' }
]

// 计算属性
const currentPage = computed(() => {
  // 根据当前路由路径确定页面名称
  const routePath = router.currentRoute.value.path
    const routeMap: Record<string, string> = {
     '/': '首页',
     '/cases': '用例库管理',
     '/debug': '调试信息',
     '/test-drag': '拖拽测试',
     '/workspace': '工作区管理',
     '/workspace/viewer': '本地日志查看',
     '/workspace/dump': '日志转储管理',
     '/workspace/rpc-analysis': 'RPC调用分析',
     '/workspace/analysis': '智能分析',
     '/workspace/visualization': '可视化',
     '/workspace/reports': '报表'
   }
  
  return routeMap[routePath] || '首页'
})

// 面包屑项目
const breadcrumbItems = computed(() => {
  const routePath = router.currentRoute.value.path
  
  // 首页
  if (routePath === '/') {
    return ['首页']
  }
  
  // 工作区相关页面
  if (routePath.startsWith('/workspace')) {
    if (routePath === '/workspace') {
      return ['首页', '工作区管理']
    } else {
      const pageName = currentPage.value
      return ['首页', '工作区管理', pageName]
    }
  }
  
  // 其他页面
  return ['首页', currentPage.value]
})

// 工作区下拉菜单选项
const workspaceDropdownOptions = computed(() => {
  const options: any[] = []
  
  if (hasWorkspaces.value) {
    // 添加工作区列表
    workspaceStore.workspaces.forEach(workspace => {
      const isCurrent = workspace.id === workspaceStore.currentWorkspaceId
      const label = workspace.name
      
      options.push({
        label: () => h('div', { 
          style: 'display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0;' 
        }, [
          h('span', { style: 'display: flex; align-items: center;' }, label),
          h('div', { 
            style: 'display: flex; align-items: center; margin-left: 16px;' 
          }, [
            h(NIcon, { 
              size: 20, 
              color: '#d03050',
              style: 'cursor: pointer; padding: 4px; display: flex; align-items: center; transform: translateY(-2px);',
              onClick: (e: Event) => {
                e.stopPropagation()
                handleWorkspaceDelete(workspace.id)
              }
            }, { default: () => h(TrashOutline) })
          ])
        ]),
        key: `workspace-${workspace.id}`,
        icon: renderIcon(DocumentOutline)
      })
    })
    
    // 添加分隔线
    options.push({
      type: 'divider',
      key: 'divider-1'
    })
  }
  
  // 添加新建工作区选项
  options.push({
    label: '新建工作区',
    key: 'create-new',
    icon: renderIcon(AddOutline),
    disabled: true
  })
  
  return options
})

// 工作区下拉菜单标签
const workspaceDropdownLabel = computed(() => {
  if (!hasWorkspaces.value) {
    return '创建工作区'
  }
  const currentWorkspace = workspaceStore.currentWorkspace
  return currentWorkspace ? currentWorkspace.name : '选择工作区'
})

// 计算是否可以创建工作区
const canCreateWorkspace = computed(() => {
  return newWorkspace.name.trim() !== '' && modalFileList.value.length > 0
})

// 方法
function handleMenuUpdate(key: string) {
  
  activeKey.value = key
  
  // 路由导航
  const routeMap: Record<string, string> = {
    'home': '/',
    'cases': '/cases',
    'workspace': '/workspace',
    'workspace-viewer': '/workspace/viewer',
    'workspace-dump': '/workspace/dump',
    'workspace-rpc-analysis': '/workspace/rpc-analysis',
    'workspace-analysis': '/workspace/analysis',
    'workspace-visualization': '/workspace/visualization',
    'workspace-reports': '/workspace/reports'
  }
  
  const route = routeMap[key]
  if (route) {
    router.push(route).then(() => {
      // 路由跳转成功
    }).catch(err => {
      console.error('路由跳转失败:', err)
    })
  } else {
    console.warn('未找到对应的路由:', key)
  }
}

function handleWorkspaceDropdownSelect(key: string) {
  
  if (key === 'create-new') {
    // 新建工作区
    showCreateWorkspace.value = true
  } else if (key.startsWith('workspace-')) {
    // 切换工作区
    const workspaceId = key.replace('workspace-', '')
    workspaceStore.setCurrentWorkspace(workspaceId)
  }
}

// 处理工作区删除
function handleWorkspaceDelete(workspaceId: string) {
  const workspace = workspaceStore.workspaces.find(w => w.id === workspaceId)
  if (!workspace) return
  
  // 显示确认对话框
  window.confirm(`确定要删除工作区 "${workspace.name}" 吗？此操作不可恢复。`) ? 
    (() => {
      const isLastWorkspace = workspaceStore.workspaces.length === 1
      workspaceStore.deleteWorkspace(workspaceId)
      
      // 如果删除的是最后一个工作区，跳转到工作区管理页面
      if (isLastWorkspace) {
        router.push('/workspace')
      }
    })() : 
    (() => {
      // 用户取消删除操作
    })()
}

function handleWorkspaceChange(workspaceId: string) {
  workspaceStore.setCurrentWorkspace(workspaceId)
}

function handleDeleteWorkspace() {
  if (workspaceStore.currentWorkspaceId) {
    const isLastWorkspace = workspaceStore.workspaces.length === 1
    workspaceStore.deleteWorkspace(workspaceStore.currentWorkspaceId)
    
    // 如果删除的是最后一个工作区，跳转到工作区管理页面
    if (isLastWorkspace) {
      router.push('/workspace')
    }
  }
}

// 文件处理方法
function handleModalFileChange(options: { fileList: UploadFileInfo[] }) {
  modalFileList.value = options.fileList
  
  // 如果有文件，自动解压
  if (options.fileList.length > 0) {
    const file = options.fileList[0]
    if (file.file && file.name.endsWith('.gz')) {
      extractModalGzFile(file.file)
    }
  }
}

function handleModalFileRemove(options: { fileList: UploadFileInfo[] }) {
  modalFileList.value = options.fileList
}

// 创建模态框工作区
async function createWorkspaceFromModal() {
  if (!newWorkspace.name.trim() || modalFileList.value.length === 0) {
    console.warn('表单验证失败，无法创建工作区')
    return
  }
  
  // 使用store创建新工作区
  const workspace = workspaceStore.createWorkspace({
    name: newWorkspace.name,
    description: `工作区：${newWorkspace.name}`,
    type: newWorkspace.type,
    status: 'active'
  })
  
  // 切换到新创建的工作区
  workspaceStore.setCurrentWorkspace(workspace.id)
  showCreateWorkspace.value = false
  
  // 重置表单
  newWorkspace.name = ''
  newWorkspace.type = 'general'
  modalFileList.value = []
  
  // 创建第一个工作区后跳转到工作区管理页面，否则跳转到日志查看页面
  if (workspaceStore.workspaces.length === 1) {
    router.push('/workspace')
  } else {
    router.push('/workspace/viewer')
  }
}

// 解压模态框中的gz文件
async function extractModalGzFile(file: File) {
  try {
    // 使用pako库解压gz文件
    const arrayBuffer = await file.arrayBuffer()
    const uint8Array = new Uint8Array(arrayBuffer)
    
    // 动态导入pako库
    const pako = await import('pako')
    const decompressed = pako.inflate(uint8Array, { to: 'string' })
    
    // 创建解压后的文件对象
    const extractedFile = new File([decompressed], file.name.replace('.gz', ''), {
      type: 'text/plain'
    })
    
    // 更新模态框文件列表，用解压后的文件替换原文件
    modalFileList.value = [{
      id: modalFileList.value[0]?.id || Date.now().toString(),
      name: extractedFile.name,
      status: 'finished',
      file: extractedFile
    }]
    
  } catch (error) {
    console.error('模态框解压文件失败:', error)
    // 解压失败时保持原文件
  }
}

function renderIcon(icon: any) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 处理日志篮点击事件
function handleLogBasketClick() {
  // 如果抽屉已经打开，则关闭抽屉
  if (showLogBasketDrawer.value) {
    showLogBasketDrawer.value = false
  } else {
    // 如果抽屉未打开，则打开抽屉
    showLogBasketDrawer.value = true
  }
}

// 右键菜单选项
const rightClickMenuOptions = [
  {
    label: '清空',
    key: 'clear',
    icon: renderIcon(TrashOutline)
  }
]

// 处理日志篮右键点击事件
function handleLogBasketRightClick(event: MouseEvent) {
  event.preventDefault()
  
  // 设置右键菜单位置
  rightClickMenuX.value = event.clientX
  rightClickMenuY.value = event.clientY
  
  // 显示右键菜单
  showRightClickMenu.value = true
  
  // 隐藏 tooltip - 通过设置鼠标离开事件来隐藏
  const button = event.currentTarget as HTMLElement
  if (button) {
    // 触发鼠标离开事件来隐藏 tooltip
    button.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
  }
}

// 处理右键菜单选择事件
function handleRightClickMenuSelect(key: string) {
  if (key === 'clear') {
    // 显示清空动画
    showClearAnimation.value = true
    
    // 延迟清空，让动画有时间播放
    setTimeout(() => {
      // 清空日志篮
      logBasketStore.clearLogBasket()
      
      // 隐藏右键菜单
      showRightClickMenu.value = false
      
      // 隐藏动画，显示成功提示
      showClearAnimation.value = false
      showClearSuccess.value = true
      
      // 播放清空音效（可选）
      playClearSound()
    }, 500)
  } else {
    // 隐藏右键菜单
    showRightClickMenu.value = false
  }
}

// 日志篮相关计算属性和方法
const logBasketStats = computed(() => logBasketStore.getLogBasketStats())
const logBasketItems = computed(() => {
  // 获取所有日志项并按时间戳排序
  const items = logBasketStore.getAllLogItems()
  return items.sort((a, b) => {
    // 按时间戳降序排列（最新的日志在前面）
    const timeA = new Date(a.timestamp).getTime()
    const timeB = new Date(b.timestamp).getTime()
    return timeB - timeA
  })
})

// 获取日志级别对应的标签类型
function getLogLevelType(level: string): 'success' | 'warning' | 'error' | 'info' | 'default' {
  const levelLower = level.toLowerCase()
  if (levelLower === 'error' || levelLower === 'fatal') return 'error'
  if (levelLower === 'warn' || levelLower === 'warning') return 'warning'
  if (levelLower === 'info' || levelLower === 'debug') return 'info'
  if (levelLower === 'success') return 'success'
  return 'default'
}

// 获取日志类型对应的标签类型
function getLogTypeTagType(logType: string): 'info' | 'warning' | 'error' | 'success' {
  // 根据日志类型返回不同的标签类型
  if (logType === 'debug') return 'info';      // 调试日志 - 蓝色
  if (logType === 'framework') return 'warning'; // 框架日志 - 橙色
  if (logType === 'operation') return 'success'; // 操作日志 - 绿色
  return 'info'; // 默认类型
}

// 获取Interface样式类
function getInterfaceClass(interfaceName: string) {
  const interfaceLower = interfaceName.toLowerCase()
  switch (interfaceLower) {
    case 'redfish':
      return 'log-interface log-interface-redfish'
    case 'web':
      return 'log-interface log-interface-web'
    case 'ipmi':
      return 'log-interface log-interface-ipmi'
    case 'cli':
      return 'log-interface log-interface-cli'
    case 'busctl':
      return 'log-interface log-interface-busctl'
    case 'mdbctl':
      return 'log-interface log-interface-mdbctl'
    default:
      return 'log-interface log-interface-unknown'
  }
}

// 获取日志类型显示名称
function getLogTypeDisplayName(logType: string): string {
  // 将英文类型转换为中文显示名称
  if (logType === 'debug') return '调试日志';
  if (logType === 'framework') return '框架日志';
  if (logType === 'operation') return '操作日志';
  return logType; // 如果是其他类型，直接显示原值
}

// 移除日志篮中的项目
function removeLogBasketItem(id: string) {
  logBasketStore.removeLogItem(id)
}

// 清理重复日志
function cleanDuplicateLogs() {
  const removedCount = logBasketStore.cleanDuplicateLogs()
  if (removedCount > 0) {
    dragResultMessage.value = `已清理 ${removedCount} 条重复日志`
    showDragResult.value = true
    setTimeout(() => {
      showDragResult.value = false
    }, 3000)
  }
}

// 清空日志篮
function clearLogBasket() {
  logBasketStore.clearLogBasket()
}

// 处理清空全部按钮的鼠标进入事件
function handleClearAllButtonHover() {
  // 可以在这里添加一些视觉反馈，例如改变按钮颜色或背景
  // 例如：document.querySelector('.clear-all-button')?.classList.add('hover')
}

// 处理清空全部按钮的鼠标离开事件
function handleClearAllButtonLeave() {
  // 可以在这里移除鼠标进入时添加的视觉反馈
  // 例如：document.querySelector('.clear-all-button')?.classList.remove('hover')
}


// 播放清空音效
function playClearSound() {
  try {
    // 创建音频上下文
    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
    const oscillator = audioContext.createOscillator()
    const gainNode = audioContext.createGain()
    
    oscillator.connect(gainNode)
    gainNode.connect(audioContext.destination)
    
    // 设置音效参数
    oscillator.frequency.setValueAtTime(800, audioContext.currentTime)
    oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.3)
    
    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3)
    
    // 播放音效
    oscillator.start(audioContext.currentTime)
    oscillator.stop(audioContext.currentTime + 0.3)
  } catch (error) {
    console.log('音效播放失败:', error)
  }
}

// 播放添加成功音效
function playAddSuccessSound() {
  try {
    // 创建音频上下文
    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
    const oscillator = audioContext.createOscillator()
    const gainNode = audioContext.createGain()
    
    oscillator.connect(gainNode)
    gainNode.connect(audioContext.destination)
    
    // 设置音效参数 - 上升音调，表示成功
    oscillator.frequency.setValueAtTime(400, audioContext.currentTime)
    oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.2)
    
    gainNode.gain.setValueAtTime(0.2, audioContext.currentTime)
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)
    
    // 播放音效
    oscillator.start(audioContext.currentTime)
    oscillator.stop(audioContext.currentTime + 0.2)
  } catch (error) {
    console.log('音效播放失败:', error)
  }
}



// 格式化日期
function formatDate(date: Date): string {
  return new Date(date).toLocaleString('zh-CN')
}

// 拖拽相关方法
function handleLogBasketDragOver(event: DragEvent) {
  event.preventDefault()
  event.dataTransfer!.dropEffect = 'copy'
  
  if (!isDragOver.value) {
    isDragOver.value = true
  }
}

// 处理拖拽开始
function handleDragStart(event: DragEvent) {
  // 拖拽开始
}

// 处理拖拽结束
function handleDragEnd(event: DragEvent) {
  isDragOver.value = false
}

// 通用的操作日志解析函数
function parseOperationLog(rawLog: string) {
  // 实际格式: 2025-06-30 16:54:48 Redfish,Administrator@21.21.0.61,redfish,Delete event subscription successfully
  // 先按逗号分割，然后处理第一部分（包含时间）
  const commaParts = rawLog.split(',')
  
  if (commaParts.length >= 4) {
    // 第一部分包含时间和接口，需要分离
    const firstPart = commaParts[0] // "2025-06-30 16:54:48 Redfish"
    
    const timeMatch = firstPart.match(/^(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})\s+(.+)$/)
    
    if (timeMatch) {
      const result = {
        timestamp: timeMatch[1], // "2025-06-30 16:54:48"
        level: timeMatch[2], // "Redfish"
        userInfo: commaParts[1], // "Administrator@21.21.0.61"
        component: commaParts[2], // "redfish"
        message: commaParts[3], // "Delete event subscription successfully"
        rawContent: rawLog,
        logType: 'operation'
      }
      
      return result
    }
  }
  
  // 如果解析失败，返回null表示不是操作日志格式
  return null
}

// 检查是否为操作日志格式
function isOperationLogFormat(rawLog: string): boolean {
  const commaParts = rawLog.split(',')
  if (commaParts.length >= 4) {
    const firstPart = commaParts[0]
    const timeMatch = firstPart.match(/^(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})\s+(.+)$/)
    return timeMatch !== null
  }
  return false
}

function handleLogBasketDragEnter(event: DragEvent) {
  event.preventDefault()
  isDragOver.value = true
}

function handleLogBasketDragLeave(event: DragEvent) {
  // 检查是否真的离开了拖拽区域
  const relatedTarget = event.relatedTarget as Node
  const quickActionsRight = document.querySelector('.quick-actions-right')
  
  if (!quickActionsRight || !quickActionsRight.contains(relatedTarget)) {
    isDragOver.value = false
  }
}

function handleLogBasketDrop(event: DragEvent) {
  event.preventDefault()
  isDragOver.value = false
  
  try {
    // 尝试获取拖拽数据
    const logData = event.dataTransfer!.getData('application/json')
    
    if (!logData) {
      console.error('拖拽数据为空')
      dragResultMessage.value = '拖拽数据为空，拖拽失败'
      showDragResult.value = true
      setTimeout(() => showDragResult.value = false, 3000)
      return
    }
    
    const parsedData = JSON.parse(logData)
    
    // 检查是否为操作日志格式，如果是则进行解析
    let finalData = parsedData
    
    // 关键：优先使用rawContent进行解析，确保这是完整的原始日志内容
    const rawLogContent = parsedData.rawContent
    if (rawLogContent && isOperationLogFormat(rawLogContent)) {
      const operationLogData = parseOperationLog(rawLogContent)
      if (operationLogData) {
        finalData = {
          ...parsedData,
          ...operationLogData,
          // 覆盖原有字段
          timestamp: operationLogData.timestamp,
          level: operationLogData.level,
          message: operationLogData.message,
          logType: 'operation',
          userInfo: operationLogData.userInfo,
          component: operationLogData.component,
          rawContent: rawLogContent // 保持完整的原始内容
        }
      }
    }
    
    // 添加到日志篮
    if (workspaceStore.currentWorkspace) {
      const result = logBasketStore.addLogItem({
        timestamp: finalData.timestamp,
        level: finalData.level || 'INFO',
        message: finalData.message,
        filePath: finalData.filePath || 'unknown',
        lineNumber: finalData.lineNumber,
        rawContent: finalData.rawContent || finalData.message,
        logType: finalData.logType || 'debug', // 默认为调试日志
        component: finalData.component,
        userInfo: finalData.userInfo, // 添加用户信息字段
        workspaceId: workspaceStore.currentWorkspace.id,
        logIndex: finalData.logIndex  // 添加日志序号
      })
      
      if (result) {
        // 显示添加成功动画
        showAddAnimation.value = true
        
        // 延迟显示成功提示，让动画有时间播放
        setTimeout(() => {
          // 隐藏动画，显示成功提示
          showAddAnimation.value = false
          addSuccessMessage.value = '日志已添加到日志篮'
          showAddSuccess.value = true
          
          // 播放添加成功音效
          playAddSuccessSound()
        }, 300)
      } else {
        // 显示重复提示
        dragResultMessage.value = '日志已存在，未重复添加'
        showDragResult.value = true
        // 3秒后自动隐藏提示
        setTimeout(() => {
          showDragResult.value = false
        }, 3000)
      }
    } else {
      console.error('没有当前工作区')
      dragResultMessage.value = '没有当前工作区，无法添加日志'
      showDragResult.value = true
      setTimeout(() => showDragResult.value = false, 3000)
    }
  } catch (error) {
    console.error('处理拖拽数据时出错:', error)
    dragResultMessage.value = `拖拽处理失败: ${error instanceof Error ? error.message : '未知错误'}`
    showDragResult.value = true
    setTimeout(() => showDragResult.value = false, 3000)
  }
}


</script>

<style scoped>
.logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
}

.logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.logo h2 {
  margin: 0;
  color: #1e293b;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.logo:hover h2 {
  color: #3b82f6;
  transform: scale(1.05);
}

.header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.header-left::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.workspace-selector {
  display: flex;
  align-items: center;
  position: relative;
}

.workspace-selector::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.dropdown-arrow {
  color: #666;
  transition: all 0.2s ease;
  font-size: 12px;
  margin-left: 4px;
}

.workspace-dropdown-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}

.workspace-dropdown-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(239, 246, 255, 0.95));
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.workspace-dropdown-btn:hover .dropdown-arrow {
  transform: translateY(1px);
  color: #3b82f6;
}

.workspace-label {
  margin: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: color 0.25s ease;
}

.workspace-dropdown-btn:hover .workspace-label {
  color: #1f2937;
}

/* 右侧快捷操作样式 */
.quick-actions-right {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  /* 扩大拖拽区域 */
  padding: 20px;
  min-width: 88px;
  min-height: 88px;
  /* 添加拖拽区域背景，方便调试 */
  /* background: rgba(102, 126, 234, 0.05); */
}

/* 扩展拖拽区域覆盖 */
.drag-area-cover {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  pointer-events: none;
  z-index: 9998;
}

/* 拖拽区域指示器 */
.drag-zone-indicator {
  width: 120px;
  height: 120px;
  border: 2px dashed rgba(102, 126, 234, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 9997;
}

.drag-zone-indicator.active {
  opacity: 1;
  border-color: rgba(102, 126, 234, 0.6);
  border-width: 3px;
  animation: dragZonePulse 1.5s ease-in-out infinite;
}

@keyframes dragZonePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    border-color: rgba(102, 126, 234, 0.6);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    border-color: rgba(102, 126, 234, 0.8);
  }
}

.drag-hint-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #667eea;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  animation: hintTextFade 1.5s ease-in-out infinite;
}

@keyframes hintTextFade {
  0%, 100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.quick-action-btn {
  width: 48px;
  height: 48px;
  transition: all 0.3s ease;
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
}

.quick-action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.log-basket-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(102, 126, 234, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.log-basket-btn:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.08) 100%);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(102, 126, 234, 0.2),
    0 2px 8px rgba(102, 126, 234, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.log-basket-btn.drag-over {
  background: rgba(102, 126, 234, 0.25);
  border-color: rgba(102, 126, 234, 0.6);
  transform: scale(1.15);
  box-shadow: 
    0 0 25px rgba(102, 126, 234, 0.4),
    0 0 50px rgba(102, 126, 234, 0.2),
    inset 0 0 20px rgba(102, 126, 234, 0.1);
  animation: dragPulse 1.5s ease-in-out infinite;
}

@keyframes dragPulse {
  0%, 100% {
    transform: scale(1.15);
    box-shadow: 
      0 0 25px rgba(102, 126, 234, 0.4),
      0 0 50px rgba(102, 126, 234, 0.2),
      inset 0 0 20px rgba(102, 126, 234, 0.1);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 
      0 0 35px rgba(102, 126, 234, 0.5),
      0 0 70px rgba(102, 126, 234, 0.3),
      inset 0 0 25px rgba(102, 126, 234, 0.15);
  }
}

/* 清空动画效果 */
.log-basket-btn.clear-animation {
  animation: clearPulse 0.5s ease-in-out;
}

@keyframes clearPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    background: rgba(255, 107, 107, 0.3);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
  }
  100% {
    transform: scale(1);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: none;
  }
}

/* 日志项清空动画 */
.log-basket-item.clear-animation {
  animation: itemFadeOut 0.5s ease-in-out forwards;
}

@keyframes itemFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* 添加成功动画效果 */
.log-basket-btn.add-animation {
  animation: addPulse 0.3s ease-in-out;
}

@keyframes addPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
    background: rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
  }
  100% {
    transform: scale(1);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: none;
  }
}

/* 日志数量徽章样式 */
.log-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ffffff;
  border: 2px solid #667eea;
  border-radius: 10px;
  color: #667eea;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.log-count-badge:hover {
  background: #667eea;
  color: #ffffff;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* 清空全部按钮样式 */
.clear-all-button {
  position: relative;
  z-index: 10;
  transition: all 0.2s ease;
}

.clear-all-button:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 删除日志按钮样式 */
.delete-log-btn {
  transition: all 0.2s ease;
}

.delete-log-btn:hover {
  background-color: rgba(208, 48, 80, 0.1);
  transform: scale(1.1);
}

/* Interface标签样式 - 与主页保持一致 */
.interface-tag {
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 8px;
  min-width: 50px;
  text-align: center;
  opacity: 0.85;
  display: inline-block;
}

/* Interface颜色样式 - 与主页保持一致 */
.log-interface {
  font-weight: 600;
}

.log-interface-redfish {
  color: #1890ff;
}

.log-interface-web {
  color: #52c41a;
}

.log-interface-ipmi {
  color: #fa8c16;
}

.log-interface-cli {
  color: #722ed1;
}

.log-interface-busctl {
  color: #13c2c2;
}

.log-interface-mdbctl {
  color: #eb2f96;
}

.log-interface-unknown {
  color: #8c8c8c;
}

/* 日志级别标签样式 - 圆形外框，相对较小 */
.log-level-tag {
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  margin-left: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  min-width: 50px;
  text-align: center;
  opacity: 0.85;
}

/* 日志类型标签样式 - 方形外框，更加突出 */
.log-type-tag {
  border-radius: 4px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  margin-right: 8px;
  text-transform: none;
  letter-spacing: 0.3px;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 日志类型文本样式 */
.log-type-text {
  color: #666;
  font-size: 12px;
  font-style: italic;
  margin-left: 8px;
}
 
 /* 操作日志测试区域样式 */
 .operation-log-test-area {
   margin-bottom: 20px;
   padding: 20px;
   background: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
 }
 
 .test-log-item {
   padding: 12px;
   background: white;
   border: 1px solid #dee2e6;
   border-radius: 6px;
   cursor: grab;
   margin-bottom: 10px;
   transition: all 0.2s ease;
 }
 
 .test-log-item:hover {
   background: #e9ecef;
   border-color: #adb5bd;
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .test-log-item:active {
   cursor: grabbing;
   transform: translateY(0);
 }
 
 .test-log-item.dragging {
   opacity: 0.5;
   transform: scale(0.95);
 }

/* Tauri拖拽区域样式 */
[data-tauri-drag-region] {
  -webkit-app-region: drag;
}

/* 排除交互元素的拖拽 */
.quick-action-btn,
.log-basket-btn,
.drag-zone-indicator,
.drag-area-cover {
  -webkit-app-region: no-drag;
}

/* 导航栏按钮样式优化 */
:deep(.header .n-button) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

:deep(.header .n-button:hover) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(239, 246, 255, 0.95));
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

:deep(.header .n-button:active) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* 面包屑导航样式优化 */
:deep(.n-breadcrumb) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.6));
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

:deep(.n-breadcrumb-item) {
  color: #3b82f6;
  font-weight: 500;
  transition: color 0.25s ease;
}

:deep(.n-breadcrumb-item:hover) {
  color: #1d4ed8;
}

:deep(.n-breadcrumb-item:last-child) {
  color: #1d4ed8;
  font-weight: 600;
}

/* 侧边栏菜单样式优化 */
:deep(.n-layout-sider) {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

/* 侧边栏折叠触发器样式 */
:deep(.n-layout-sider-trigger) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

:deep(.n-layout-sider-trigger:hover) {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
}

:deep(.n-layout-sider-trigger .n-layout-sider-trigger-arrow) {
  color: #64748b;
  transition: all 0.25s ease;
}

:deep(.n-layout-sider-trigger:hover .n-layout-sider-trigger-arrow) {
  color: #3b82f6;
  transform: scale(1.1);
}

:deep(.n-menu) {
  background: transparent;
}

:deep(.n-menu-item) {
  margin: 4px 8px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

:deep(.n-menu-item:hover) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05));
  transform: translateX(4px);
}

:deep(.n-menu-item--selected) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
  border-left: 3px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

:deep(.n-menu-item-content) {
  border-radius: 8px;
  padding: 8px 12px;
}

:deep(.n-menu-item-content__icon) {
  color: #3b82f6;
  transition: all 0.25s ease;
}

:deep(.n-menu-item:hover .n-menu-item-content__icon) {
  color: #1d4ed8;
  transform: scale(1.1);
}

:deep(.n-menu-item--selected .n-menu-item-content__icon) {
  color: #1d4ed8;
}

:deep(.n-menu-item-content__text) {
  color: #3b82f6;
  font-weight: 500;
  transition: color 0.25s ease;
}

:deep(.n-menu-item:hover .n-menu-item-content__text) {
  color: #1d4ed8;
}

:deep(.n-menu-item--selected .n-menu-item-content__text) {
  color: #1d4ed8;
  font-weight: 600;
}

/* 菜单组标题样式 */
:deep(.n-menu-item-group-header) {
  color: #3b82f6;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 8px 8px 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  border-left: 2px solid #3b82f6;
}
</style>